window.onload = function (ev) {
    var i;//循环索引
    var originalN = 3;//初始阶数
    var cube;//创建魔方
    var itv = 1;//定时器间隔
    var rFace = Faces.None, rLayerX = 0, rLayerY = 0, rLayerZ = 0;//选择面，选择层
    var AnimationFlag = true;//是否使用动画
    var CubeButtonFlag = true;//是否使用魔方按钮
    //标题
    var header = document.getElementById("head");
    header.innerHTML = "3阶魔方";

    var btn_play = document.getElementsByClassName("model-buttons")[0];
    var btn_animation = document.getElementById("animation-switch");
    var btn_cubeBtn = document.getElementById("cubeBtn-switch");

    var btn_control = document.getElementById("btn-control");
    var btn_rise = document.getElementById("rise");
    var btn_reduce = document.getElementById("reduce");
    var btn_break = document.getElementById("rotate");
    var btn_reset = document.getElementById("reset");

    var btn_front_left = document.getElementById("btn-fl");
    var btn_front_down = document.getElementById("btn-fd");
    var btn_up_up = document.getElementById("btn-uu");
    var btn_up_left = document.getElementById("btn-ul");
    var btn_right_right = document.getElementById("btn-rr");
    var btn_right_down = document.getElementById("btn-rd");

    var btn_turn_up = document.getElementById("tu");
    var btn_turn_down = document.getElementById("td");
    var btn_turn_left = document.getElementById("tl");
    var btn_turn_right = document.getElementById("tr");

    var btn_c_f = document.getElementById("btn-c-f");
    var btn_c_u = document.getElementById("btn-c-u");
    var btn_c_r = document.getElementById("btn-c-r");

    var btn_ri_x = document.getElementById("rise-x-layer");
    var btn_ri_y = document.getElementById("rise-y-layer");
    var btn_re_x = document.getElementById("reduce-x-layer");
    var btn_re_y = document.getElementById("reduce-y-layer");

    var btn_riX_riY = document.getElementById("rise-x-rise-y");
    var btn_reX_reY = document.getElementById("reduce-x-reduce-y");
    var btn_riX_reY = document.getElementById("rise-x-reduce-y");
    var btn_reX_riY = document.getElementById("reduce-x-rise-y");

    var btn_sun = document.getElementById("btn-sun");
    var btn_moon = document.getElementById("btn-moon");

    var btn_clockwise = document.getElementById("clockwise");
    var btn_contrarotate = document.getElementById("contrarotate");
    var btn_mcy = document.getElementById("mbtn-c-f");
    var btn_mcz = document.getElementById("mbtn-c-u");
    var btn_mcr = document.getElementById("mbtn-c-r");

    var btn_add = document.getElementById("add");
    var btn_sub = document.getElementById("sub");

    /**面*/
    var container = document.getElementsByClassName("container")[0];
    var content = document.getElementsByClassName("content")[0];
    var box = document.getElementsByClassName("box")[0];
    var surface = document.getElementsByClassName("surface");

    var fF = document.getElementsByClassName("f")[0];
    var bF = document.getElementsByClassName("b")[0];
    var rF = document.getElementsByClassName("r")[0];
    var lF = document.getElementsByClassName("l")[0];
    var uF = document.getElementsByClassName("u")[0];
    var dF = document.getElementsByClassName("d")[0];

    var uBlocks = uF.childNodes;
    var dBlocks = dF.childNodes;
    var fBlocks = fF.childNodes;
    var bBlocks = bF.childNodes;
    var lBlocks = lF.childNodes;
    var rBlocks = rF.childNodes;

    var cf = document.getElementsByClassName("cf")[0];
    var cr = document.getElementsByClassName("cr")[0];
    var cu = document.getElementsByClassName("cu")[0];

    var cf2 = document.getElementsByClassName("cf2")[0];
    var cr2 = document.getElementsByClassName("cr2")[0];
    var cu2 = document.getElementsByClassName("cu2")[0];

    var sunLayer = document.getElementById("sun-layer");
    var moonLayer = document.getElementById("moon-layer");
    var sunModel = document.getElementById("sun-model");
    var moonModel = document.getElementById("moon-model");

    var faceBlocks, upside, downside, leftside, rightside, frontside, behindside;

    box.style.transform = "rotateX(-30deg) rotateY(-34deg) rotateZ(-3deg)";

    sunLayer.innerHTML = rLayerX + "*" + rLayerY;
    moonLayer.innerHTML = rLayerZ.toString();


    /**************初始绘制魔方********/
    createCube(originalN);
    paintCube();


    var controlFlag = true;
    /**********控制按钮***********/
    //控制开关
    btn_control.onclick = function () {
        if (controlFlag) {
            btn_play.style.display = "block";
            btn_control.innerHTML = "隐藏控制按钮";
        } else {
            btn_play.style.display = "none";
            btn_control.innerHTML = "显示控制按钮";
        }
        controlFlag = !controlFlag;
    };
    //重置
    btn_reset.onclick = function (ev1) {
        createCube(originalN);
    };
    //打乱
    btn_break.onclick = function (ev1) {
        cube.Break();
        paintCube();
    };
    //升阶
    btn_rise.onclick = function (ev1) {
        originalN >= 15 ? originalN = 15 : originalN++;
        header.innerHTML = originalN + "阶魔方";
        createCube(originalN);
        rLayerZ = 0;
        rFace = Faces.None;
        rLayerY = 0;
        rLayerX = 0;
        moonLayer.innerHTML = rLayerZ.toString();
        sunLayer.innerHTML = rLayerX + "*" + rLayerY;
    };
    //降阶
    btn_reduce.onclick = function (ev1) {
        originalN <= 2 ? originalN = 2 : originalN--;
        header.innerHTML = originalN + "阶魔方";
        createCube(originalN);
        rLayerZ = 0;
        moonLayer.innerHTML = rLayerZ.toString();
    };
    //太阳按钮
    btn_sun.onclick = function (ev1) {
        sunModel.style.display = "none";
        moonModel.style.display = "block";
    };
    //月亮按钮
    btn_moon.onclick = function (ev1) {
        sunModel.style.display = "block";
        moonModel.style.display = "none";
    };
    //动画开关
    btn_animation.onclick = function (ev1) {
        AnimationFlag = !AnimationFlag;
        if (AnimationFlag) {
            btn_animation.innerHTML = "关闭旋转动画";
        } else {
            btn_animation.innerHTML = "开启旋转动画";
        }
    };
    //按钮开关
    btn_cubeBtn.onclick = function (ev1) {
        CubeButtonFlag = !CubeButtonFlag;
        if (CubeButtonFlag) {
            btn_cubeBtn.innerHTML = "关闭魔方按钮";
            showRotateButtonAfterRotate();
        } else {
            btn_cubeBtn.innerHTML = "开启魔方按钮";
            hideRotateButtonWhenRotate();
        }
    };

    /**********魔方整体操作按钮*/
    btn_front_down.onclick = function (ev1) {
        showRotateCube3d(Dimension.X_);
    };

    btn_front_left.onclick = function (ev1) {
        showRotateCube3d(Dimension.Z);
    };

    btn_up_left.onclick = function (ev1) {
        showRotateCube3d(Dimension.Y_);
    };

    btn_up_up.onclick = function (ev1) {
        showRotateCube3d(Dimension.X);
    };

    btn_right_down.onclick = function (ev1) {
        showRotateCube3d(Dimension.Y);
    };

    btn_right_right.onclick = function (ev1) {
        showRotateCube3d(Dimension.Z_);
    };

    /**************太阳模式下的切换面操作    */

    btn_c_f.onclick = function (ev1) {
        rFace = Faces.Front;
    };

    btn_c_u.onclick = function (ev1) {
        rFace = Faces.Up;
    };

    btn_c_r.onclick = function (ev1) {
        rFace = Faces.Right;
    };

    /************月亮模式下的切换面操作****/
    btn_mcy.onclick = function (ev1) {
        rFace = Faces.Front;
    };

    btn_mcz.onclick = function (ev1) {
        rFace = Faces.Up;
    };

    btn_mcr.onclick = function (ev1) {
        rFace = Faces.Right;
    };

    /*************月亮模式下层数上升与下降*******/
    btn_add.onclick = function (ev1) {
        cube.nCount > rLayerZ ? rLayerZ++ : rLayerZ = -cube.nCount;
        moonLayer.innerHTML = rLayerZ.toString();
    };

    btn_sub.onclick = function (ev1) {
        -cube.nCount < rLayerZ ? rLayerZ-- : rLayerZ = cube.nCount;
        moonLayer.innerHTML = rLayerZ.toString();
    };

    /**************顺时针旋转按钮*******/
    btn_clockwise.onclick = function (ev1) {
        cube.RotateControl(rFace, rLayerZ, 1);
        paintCube();
    };
    /***************逆时针旋转按钮********/
    btn_contrarotate.onclick = function (ev1) {
        cube.RotateControl(rFace, rLayerZ, 3);
        paintCube();
    };

    /*************太阳模式下方格控制按钮****/
    btn_ri_x.onclick = function (ev1) {
        cube.nCount > rLayerX ? rLayerX++ : rLayerX = cube.nCount;
        sunLayer.innerHTML = rLayerX + "*" + rLayerY;
    };

    btn_ri_y.onclick = function (ev1) {
        cube.nCount > rLayerY ? rLayerY++ : rLayerY = cube.nCount;
        sunLayer.innerHTML = rLayerX + "*" + rLayerY;
    };

    btn_re_x.onclick = function (ev1) {
        -cube.nCount < rLayerX ? rLayerX-- : rLayerX = -cube.nCount;
        sunLayer.innerHTML = rLayerX + "*" + rLayerY;
    };

    btn_re_y.onclick = function (ev1) {
        -cube.nCount < rLayerY ? rLayerY-- : rLayerY = -cube.nCount;
        sunLayer.innerHTML = rLayerX + "*" + rLayerY;
    };

    btn_riX_riY.onclick = function (ev1) {
        cube.nCount > rLayerX ? rLayerX++ : rLayerX = cube.nCount;
        cube.nCount > rLayerY ? rLayerY++ : rLayerY = cube.nCount;
        sunLayer.innerHTML = rLayerX + "*" + rLayerY;
    };

    btn_riX_reY.onclick = function (ev1) {
        cube.nCount > rLayerX ? rLayerX++ : rLayerX = cube.nCount;
        -cube.nCount < rLayerY ? rLayerY-- : rLayerY = -cube.nCount;
        sunLayer.innerHTML = rLayerX + "*" + rLayerY;
    };

    btn_reX_riY.onclick = function (ev1) {
        -cube.nCount < rLayerX ? rLayerX-- : rLayerX = -cube.nCount;
        cube.nCount > rLayerY ? rLayerY++ : rLayerY = cube.nCount;
        sunLayer.innerHTML = rLayerX + "*" + rLayerY;
    };

    btn_reX_reY.onclick = function (ev1) {
        -cube.nCount < rLayerX ? rLayerX-- : rLayerX = -cube.nCount;
        -cube.nCount < rLayerY ? rLayerY-- : rLayerY = -cube.nCount;
        sunLayer.innerHTML = rLayerX + "*" + rLayerY;
    };

    /***********太阳模式下旋转按钮*****/
    btn_turn_down.onclick = function (e) {
        switch (rFace) {
            case Faces.Front:
                cube.RotateControl(Faces.Right, rLayerY, 1);
                break;
            case Faces.Up:
                cube.RotateControl(Faces.Right, rLayerY, 1);
                break;
            case Faces.Right:
                cube.RotateControl(Faces.Front, rLayerY, 1);
                break;
        }
        paintCube();
    };
    btn_turn_left.onclick = function (ev1) {
        switch (rFace) {
            case Faces.Front:
                cube.RotateControl(Faces.Up, rLayerX, 1);
                break;
            case Faces.Up:
                cube.RotateControl(Faces.Front, rLayerX, 1);
                break;
            case Faces.Right:
                cube.RotateControl(Faces.Up, rLayerX, 1);
                break;
        }
        paintCube();
    };
    btn_turn_right.onclick = function (ev1) {
        switch (rFace) {
            case Faces.Front:
                cube.RotateControl(Faces.Up, rLayerX, 1);
                break;
            case Faces.Up:
                cube.RotateControl(Faces.Front, rLayerX, 1);
                break;
            case Faces.Right:
                cube.RotateControl(Faces.Up, rLayerX, 1);
                break;
        }
        paintCube();
    };
    btn_turn_up.onclick = function (ev1) {
        switch (rFace) {
            case Faces.Front:
                cube.RotateControl(Faces.Right, rLayerY, 1);
                break;
            case Faces.Up:
                cube.RotateControl(Faces.Right, rLayerY, 1);
                break;
            case Faces.Right:
                cube.RotateControl(Faces.Up, rLayerY, 1);
                break;
        }
        paintCube();
    };

    function createCube(N) {
        var n = N;
        if (!n) return;

        cube = new Cube(n);
        cube.Init();
        var size = cube.N * cube.Persize;

        var halfSize = size / 2 - 1;
        var halfSizeT = -halfSize;

        uF.style.transform = "translateY(" + halfSizeT + "px) rotateX(90deg)";
        dF.style.transform = "translateY(" + halfSize + "px) rotateX(-90deg)";
        fF.style.transform = "translateZ(" + halfSize + "px)";
        bF.style.transform = "translateZ(" + halfSizeT + "px) rotateY(180deg)";
        rF.style.transform = "translateX(" + halfSize + "px) rotateY(90deg)";
        lF.style.transform = "translateX(" + halfSizeT + "px) rotateY(-90deg)";

        cu.style.transform = "translateY(" + halfSizeT + "px) rotateX(90deg)";
        cf.style.transform = "translateZ(" + halfSize + "px)";
        cr.style.transform = "translateX(" + halfSize + "px) rotateY(90deg)";

        cu2.style.transform = "translateY(" + halfSizeT + "px) rotateX(90deg)";
        cf2.style.transform = "translateZ(" + halfSize + "px)";
        cr2.style.transform = "translateX(" + halfSize + "px) rotateY(90deg)";


        btn_up_left.style.transform = "translateX(-250px) translateY(" + (halfSize - 60) + "px) rotateZ(-90deg)";
        btn_up_up.style.transform = "translateX(" + (halfSize - 70) + "px) translateY(-200px) rotateZ(0deg)";
        btn_front_down.style.transform = "translateX(" + (halfSize - 70) + "px) translateY(200px) rotateZ(180deg)";
        btn_right_right.style.transform = "translateX(250px) translateY(" + (halfSize - 60) + "px) rotateZ(90deg)";
        btn_front_left.style.transform = "translateX(-250px) translateY(" + (halfSize - 60) + "px) rotateZ(-90deg)";
        btn_right_down.style.transform = "translateX(" + (halfSize - 70) + "px) translateY(200px) rotateZ(180deg)";

        container.style.display = "block";

        container.style.width = size + "px";
        box.style.width = size + "px";
        content.style.width = size + "px";

        container.style.height = size + "px";
        box.style.height = size + "px";
        content.style.height = size + "px";


        for (i = 0; i < surface.length; i++) {
            surface[i].style.width = size + "px";
            surface[i].style.height = size + "px";
        }

        removeAllChildren(uF);
        removeAllChildren(dF);
        removeAllChildren(fF);
        removeAllChildren(bF);
        removeAllChildren(rF);
        removeAllChildren(lF);

        removeAllChildren(cf2);
        removeAllChildren(cu2);
        removeAllChildren(cr2);

        var blockFace = document.createElement("div");
        blockFace.style.width = cube.Persize + "px";
        blockFace.style.height = cube.Persize + "px";

        /////////////////////
        // blockFace.style.backgroundColor = "red";
        blockFace.style.border = "solid 3px black";
        blockFace.style.cssFloat = "left";
        blockFace.style.transformStyle = "preserve-3d";

        ///////////////////////
        // blockFace.style.opacity = "0.5";

        for (i = 0; i < cube.N * cube.N; i++) {
            var cld1 = blockFace.cloneNode(true);
            uF.appendChild(cld1);
            var cld2 = blockFace.cloneNode(true);
            dF.appendChild(cld2);
            var cld3 = blockFace.cloneNode(true);
            fF.appendChild(cld3);
            var cld4 = blockFace.cloneNode(true);
            bF.appendChild(cld4);
            var cld5 = blockFace.cloneNode(true);
            lF.appendChild(cld5);
            var cld6 = blockFace.cloneNode(true);
            rF.appendChild(cld6);
        }

        createCubeButtons(N);
        paintCube();
    }

    function createCubeButtons() {
        var interval = 0;

        var n = cube.N;
        var persize = cube.Persize;
        for (i = 0; i < n; i++) {
            //Front 下面的button
            var btn1 = document.createElement("button");
            btn1.className += "cube-button";
            btn1.style.width = persize + "px";
            btn1.style.height = persize / 2 + "px";
            btn1.style.left = interval + "px";
            btn1.style.bottom = -persize / 2 + "px";
            btn1.style.transform = "RotateZ(180deg)";
            btn1.onclick = function (ev1) {
                var index = Math.floor(parseInt(this.style.left) / cube.Persize);
                hideRotateButtonWhenRotate();
                showRotateLayer3d(Faces.Right, n - index - 1, false, function () {
                    cube.RotateControlT(Faces.Right, index, 3);
                    paintCube();
                    showRotateButtonAfterRotate();
                });
            };
            //Front左面的button
            var btn2 = document.createElement("button");
            btn2.className += "cube-button";
            btn2.style.width = persize + "px";
            btn2.style.height = persize / 2 + "px";
            btn2.style.top = interval + persize / 4 + "px";
            btn2.style.left = -persize / 2 - persize / 4 + "px";
            btn2.style.transform = "RotateZ(-90deg)";
            btn2.onclick = function (ev1) {
                var index = Math.floor(n - 1 - (parseInt(this.style.top) - persize / 4) / cube.Persize);
                hideRotateButtonWhenRotate();
                showRotateLayer3d(Faces.Up, n - index - 1, true, function () {
                    cube.RotateControlT(Faces.Up, index, 1);
                    paintCube();
                    showRotateButtonAfterRotate();
                });

            };
            //Right右面的button
            var btn3 = document.createElement("button");
            btn3.className += "cube-button";
            btn3.style.width = persize + "px";
            btn3.style.height = persize / 2 + "px";
            btn3.style.top = interval + persize / 4 + "px";
            btn3.style.right = -persize / 2 - persize / 4 + "px";
            btn3.style.transform = "RotateZ(90deg)";
            btn3.onclick = function (ev1) {
                var index = Math.floor(n - 1 - (parseInt(this.style.top) - persize / 4) / cube.Persize);
                hideRotateButtonWhenRotate();
                showRotateLayer3d(Faces.Up, n - index - 1, false, function () {
                    cube.RotateControlT(Faces.Up, index, 3);
                    paintCube();
                    showRotateButtonAfterRotate();
                });
            };

            //Right下面的button
            var btn4 = document.createElement("button");
            btn4.className += "cube-button";
            btn4.style.width = persize + "px";
            btn4.style.height = persize / 2 + "px";
            btn4.style.left = interval + "px";
            btn4.style.bottom = -persize / 2 + "px";
            btn4.style.transform = "RotateZ(180deg)";
            btn4.onclick = function (ev1) {
                var index = Math.floor(n - 1 - parseInt(this.style.left) / cube.Persize);
                hideRotateButtonWhenRotate();
                showRotateLayer3d(Faces.Front, n - index - 1, true, function () {
                    cube.RotateControlT(Faces.Front, index, 1);
                    paintCube();
                    showRotateButtonAfterRotate();
                });
            };
            //Up左面的button
            var btn5 = document.createElement("button");
            btn5.className += "cube-button";
            btn5.style.width = persize + "px";
            btn5.style.height = persize / 2 + "px";
            btn5.style.bottom = interval + persize / 4 + "px";
            btn5.style.left = -persize / 2 - persize / 4 + "px";
            btn5.style.transform = "RotateZ(-90deg)";
            btn5.onclick = function (ev1) {
                var index = Math.floor(n - 1 - (parseInt(this.style.bottom) - persize / 4) / cube.Persize);
                hideRotateButtonWhenRotate();
                showRotateLayer3d(Faces.Front, n - index - 1, false, function () {
                    cube.RotateControlT(Faces.Front, index, 3);
                    paintCube();
                    showRotateButtonAfterRotate();
                });
            };

            //Up上面的button
            var btn6 = document.createElement("button");
            btn6.className += "cube-button";
            btn6.style.width = persize + "px";
            btn6.style.height = persize / 2 + "px";
            btn6.style.left = interval + "px";
            btn6.style.top = -persize / 2 + "px";
            btn6.style.transform = "RotateZ(0deg)";
            btn6.onclick = function (ev1) {
                var index = Math.floor(parseInt(this.style.left) / cube.Persize);
                hideRotateButtonWhenRotate();
                showRotateLayer3d(Faces.Right, n - index - 1, true, function () {
                    cube.RotateControlT(Faces.Right, index, 1);
                    paintCube();
                    showRotateButtonAfterRotate();
                });
            };

            interval += persize;
            cf2.appendChild(btn1);
            cf2.appendChild(btn2);
            cr2.appendChild(btn3);
            cr2.appendChild(btn4);
            cu2.appendChild(btn5);
            cu2.appendChild(btn6);
        }
    }

    function getSideLayerBlocks(face, side, index) {
        var blocks = [];
        switch (face) {
            case Faces.Front:
                switch (side) {
                    case Faces.Right:
                        for (i = index; i < cube.N * cube.N; i += cube.N) {
                            blocks.push(rBlocks[i]);
                        }
                        break;
                    case Faces.Left:
                        for (i = cube.N - 1 - index; i < cube.N * cube.N; i += cube.N) {
                            blocks.push(lBlocks[i]);
                        }
                        break;
                    case Faces.Up:
                        for (i = (cube.N - 1 - index) * cube.N; i < (cube.N - index) * cube.N; i++) {
                            blocks.push(uBlocks[i]);
                        }
                        break;
                    case Faces.Down:
                        for (i = index * cube.N; i < cube.N + index * cube.N; i++) {
                            blocks.push(dBlocks[i]);
                        }
                        break;
                }
                break;
            case Faces.Right:
                switch (side) {
                    case Faces.Front:
                        for (i = cube.N - 1 - index; i < cube.N * cube.N; i += cube.N) {
                            blocks.push(fBlocks[i]);
                        }
                        break;
                    case Faces.Behind:
                        for (i = index; i < cube.N * cube.N; i += cube.N) {
                            blocks.push(bBlocks[i]);
                        }
                        break;
                    case Faces.Up:
                        for (i = cube.N - 1 - index; i < cube.N * cube.N; i += cube.N) {
                            blocks.push(uBlocks[i]);
                        }
                        break;
                    case Faces.Down:
                        for (i = cube.N - 1 - index; i < cube.N * cube.N; i += cube.N) {
                            blocks.push(dBlocks[i]);
                        }
                        break;
                }
                break;
            case Faces.Up:
                switch (side) {
                    case Faces.Front:
                        for (i = index * cube.N; i < cube.N * index + cube.N; i++) {
                            blocks.push(fBlocks[i]);
                        }
                        break;
                    case Faces.Behind:
                        for (i = index * cube.N; i < cube.N * index + cube.N; i++) {
                            blocks.push(bBlocks[i]);
                        }
                        break;
                    case Faces.Left:
                        for (i = index * cube.N; i < cube.N * index + cube.N; i++) {
                            blocks.push(lBlocks[i]);
                        }
                        break;
                    case Faces.Right:
                        for (i = index * cube.N; i < cube.N * index + cube.N; i++) {
                            blocks.push(rBlocks[i]);
                        }
                        break;
                }
                break;
        }
        return blocks;

    }

    function getFaceBlocks(face, layer) {
        layer = cube.nCount - layer;
        if (cube.Center === 0 && layer <= 0) layer -= 1;
        switch (face) {
            case Faces.Up:
                if (layer === cube.nCount) {
                    return uF.childNodes;
                } else if (layer === -cube.nCount) {
                    return dF.childNodes;
                }
                break;
            case Faces.Front:
                if (layer === cube.nCount) {
                    return fF.childNodes;
                } else if (layer === -cube.nCount) {
                    return bF.childNodes;
                }
                break;
            case Faces.Right:
                if (layer === cube.nCount) {
                    return rF.childNodes;
                } else if (layer === -cube.nCount) {
                    return lF.childNodes;
                }
                break;
        }
        return null;
    }

    function showRotateLayer3d(face, index, direction, callback) {
        var deg = 0;
        var tDeg = deg;//侧旋转角度量
        var pDeg = deg;//面旋转角度量
        if (AnimationFlag) {
            //旋转定时器
            var timer = setInterval(function () {

                var CENTERZ = Math.floor(-cube.N * cube.Persize / 2);

                var tx, ty;
                deg++;
                if (!direction) tDeg = -deg;//逆向旋转
                else tDeg = deg;
                if (cube.nCount - index <= 0) pDeg = -tDeg;//小于0说明是旋转底面
                else pDeg = tDeg;
                //面旋转
                faceBlocks = getFaceBlocks(face, index);
                if (faceBlocks) {
                    for (i = 0; i < faceBlocks.length; i++) {
                        tx = Math.floor(cube.N * cube.Persize / 2 - parseInt(faceBlocks[i].offsetLeft));
                        ty = Math.floor(cube.N * cube.Persize / 2 - parseInt(faceBlocks[i].offsetTop));
                        RotateZAround(faceBlocks[i], pDeg, tx, ty, 0);
                    }
                }
                //侧边旋转
                switch (face) {
                    case Faces.Front:
                        upside = getSideLayerBlocks(Faces.Front, Faces.Up, index);
                        for (i = 0; i < upside.length; i++) {
                            tx = Math.floor(cube.N * cube.Persize / 2 - parseInt(upside[i].offsetLeft));
                            RotateYAround(upside[i], tDeg, tx, 0, CENTERZ);
                        }
                        rightside = getSideLayerBlocks(Faces.Front, Faces.Right, index);
                        for (i = 0; i < rightside.length; i++) {
                            ty = Math.floor(cube.N * cube.Persize / 2 - parseInt(rightside[i].offsetTop));
                            RotateXAround(rightside[i], -tDeg, 0, ty, CENTERZ);
                        }
                        leftside = getSideLayerBlocks(Faces.Front, Faces.Left, index);
                        for (i = 0; i < leftside.length; i++) {
                            ty = Math.floor(cube.N * cube.Persize / 2 - parseInt(leftside[i].offsetTop));
                            RotateXAround(leftside[i], tDeg, 0, ty, CENTERZ);
                        }
                        downside = getSideLayerBlocks(Faces.Front, Faces.Down, index);
                        for (i = 0; i < downside.length; i++) {
                            tx = Math.floor(cube.N * cube.Persize / 2 - parseInt(downside[i].offsetLeft));
                            RotateYAround(downside[i], -tDeg, tx, 0, CENTERZ);
                        }
                        break;
                    case Faces.Right:
                        upside = getSideLayerBlocks(Faces.Right, Faces.Up, index);
                        for (i = 0; i < upside.length; i++) {
                            ty = Math.floor(cube.N * cube.Persize / 2 - parseInt(upside[i].offsetTop));
                            RotateXAround(upside[i], tDeg, 0, ty, CENTERZ);
                        }
                        downside = getSideLayerBlocks(Faces.Right, Faces.Down, index);
                        for (i = 0; i < downside.length; i++) {
                            ty = Math.floor(cube.N * cube.Persize / 2 - parseInt(downside[i].offsetTop));
                            RotateXAround(downside[i], tDeg, 0, ty, CENTERZ);
                        }
                        frontside = getSideLayerBlocks(Faces.Right, Faces.Front, index);
                        for (i = 0; i < frontside.length; i++) {
                            ty = Math.floor(cube.N * cube.Persize / 2 - parseInt(frontside[i].offsetTop));
                            RotateXAround(frontside[i], tDeg, 0, ty, CENTERZ);
                        }
                        behindside = getSideLayerBlocks(Faces.Right, Faces.Behind, index);
                        for (i = 0; i < behindside.length; i++) {
                            ty = Math.floor(cube.N * cube.Persize / 2 - parseInt(behindside[i].offsetTop));
                            RotateXAround(behindside[i], -tDeg, 0, ty, CENTERZ);
                        }
                        break;
                    case Faces.Up:
                        frontside = getSideLayerBlocks(Faces.Up, Faces.Front, index);
                        for (i = 0; i < frontside.length; i++) {
                            tx = Math.floor(cube.N * cube.Persize / 2 - parseInt(frontside[i].offsetLeft));
                            RotateYAround(frontside[i], -tDeg, tx, 0, CENTERZ);
                        }
                        behindside = getSideLayerBlocks(Faces.Up, Faces.Behind, index);
                        for (i = 0; i < behindside.length; i++) {
                            tx = Math.floor(cube.N * cube.Persize / 2 - parseInt(behindside[i].offsetLeft));
                            RotateYAround(behindside[i], -tDeg, tx, 0, CENTERZ);
                        }
                        rightside = getSideLayerBlocks(Faces.Up, Faces.Right, index);
                        for (i = 0; i < rightside.length; i++) {
                            tx = Math.floor(cube.N * cube.Persize / 2 - parseInt(rightside[i].offsetLeft));
                            RotateYAround(rightside[i], -tDeg, tx, 0, CENTERZ);
                        }
                        leftside = getSideLayerBlocks(Faces.Up, Faces.Left, index);
                        for (i = 0; i < leftside.length; i++) {
                            tx = Math.floor(cube.N * cube.Persize / 2 - parseInt(leftside[i].offsetLeft));
                            RotateYAround(leftside[i], -tDeg, tx, 0, CENTERZ);
                        }
                        break;
                }
                if (deg >= 90) {
                    clearInterval(timer);
                    rotateData();
                    callback();
                }
            }, itv);
        } else {
            callback();
        }
    }

    function rotateData() {
        if (faceBlocks)
            clearTransform(faceBlocks);
        if (upside)
            clearTransform(upside);
        if (downside)
            clearTransform(downside);
        if (rightside)
            clearTransform(rightside);
        if (leftside)
            clearTransform(leftside);
        if (frontside)
            clearTransform(frontside);
        if (behindside)
            clearTransform(behindside);

    }

    function clearTransform(divs) {
        for (i = 0; i < divs.length; i++) {
            divs[i].style.transform = "";
        }
    }

    function showRotateCube3d(dms) {
        var deg = 0;
        hideRotateButtonWhenRotate();

        function callback() {
            cube.RotateCube(dms);
            paintCube();
            showRotateButtonAfterRotate();
        }

        if (AnimationFlag) {
            var timer = setInterval(function () {
                ++deg;
                //由于魔方坐标系和空间坐标系的不同导致对应不同
                switch (dms) {
                    case Dimension.X:
                        RotateOnX(content, deg);
                        break;
                    case Dimension.Y:
                        RotateOnZ(content, deg);
                        break;
                    case Dimension.Z:
                        RotateOnY(content, -deg);
                        break;
                    case Dimension.X_:
                        RotateOnX(content, -deg);
                        break;
                    case Dimension.Y_:
                        RotateOnZ(content, -deg);
                        break;
                    case Dimension.Z_:
                        RotateOnY(content, deg);
                        break;
                }
                if (deg === 90) {
                    clearInterval(timer);
                    content.style.transform = "";
                    callback();
                }
            }, itv);
        } else {
            callback();
        }
    }

    function paintCube() {
        var fc = fF.childNodes;
        var bc = bF.childNodes;
        var rc = rF.childNodes;
        var lc = lF.childNodes;
        var uc = uF.childNodes;
        var dc = dF.childNodes;

        var up = cube.GetFace(Faces.Up);
        drawFace(up, uc);
        var down = cube.GetFace(Faces.Down);
        drawFace(down, dc);
        var front = cube.GetFace(Faces.Front);
        drawFace(front, fc);
        var behind = cube.GetFace(Faces.Behind);
        drawFace(behind, bc);
        var left = cube.GetFace(Faces.Left);
        drawFace(left, lc);
        var right = cube.GetFace(Faces.Right);
        drawFace(right, rc);
    }

    function drawFace(faces, surface) {

        for (var i = 0; i < faces.length; i++) {
            switch (faces[i]) {
                case Color.Yellow:
                    surface[i].style.backgroundColor = "yellow";
                    break;
                case Color.White:
                    surface[i].style.backgroundColor = "white";
                    break;
                case Color.Blue:
                    surface[i].style.backgroundColor = "blue";
                    break;
                case Color.Green:
                    surface[i].style.backgroundColor = "green";
                    break;
                case Color.Orange:
                    surface[i].style.backgroundColor = "orange";
                    break;
                case Color.Red:
                    surface[i].style.backgroundColor = "red";
                    break;
                case Color.None:
                    surface[i].style.backgroundColor = "black";
                    break;
            }
        }
    }

    function hideRotateButtonWhenRotate() {
        hideSomeone(cu);
        hideSomeone(cf);
        hideSomeone(cr);
        hideSomeone(cu2);
        hideSomeone(cf2);
        hideSomeone(cr2);
    }

    function showRotateButtonAfterRotate() {
        showSomeone(cu);
        showSomeone(cf);
        showSomeone(cr);
        showSomeone(cu2);
        showSomeone(cf2);
        showSomeone(cr2);
    }
};

function removeAllChildren(node) {
    var children = node.childNodes;
    if (!children.length) return;
    for (var i = children.length - 1; i >= 0; i--) {
        node.removeChild(children[i]);
    }
}

